import React, { PureComponent, Fragment } from "react";
import PropTypes from "prop-types";
import { connect } from "umi";
import { Button, Input, Form, Tooltip } from "antd";
import { Link } from "umi";
import styles from "./index.less";

const FormItem = Form.Item;

@connect(({ loading, dispatch }) => ({ loading, dispatch }))
class Login extends PureComponent {
    render() {
        const { dispatch, loading } = this.props;

        const handleOk = values => {
            dispatch({ type: "app/login", payload: values });
        };

        return (
            <Fragment>
                <div className={styles.bg}>
                    <div className={styles.formWrapper}>
                        <div className={styles.formSection}>
                            <h4>课程教学综合评估系统</h4>
                            <div className={styles.form}>
                                <Form onFinish={handleOk}>
                                    <h5>登录账号</h5>
                                    <FormItem name="loginId" rules={[{ required: true }]} hasFeedback>
                                        <Input placeholder="请输入登录账号"/>
                                    </FormItem>
                                    <h5>密码</h5>
                                    <FormItem name="password" rules={[{ required: true }]} hasFeedback>
                                        <Input type="password" placeholder="请输入密码"/>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary" htmlType="submit"
                                                loading={loading.effects.login}>登录</Button>
                                    </FormItem>
                                    <FormItem>
                                        <Tooltip title="请联系管理员" placement='right' color={"#105F92"}>
                                            <span className={styles.forget}>忘记密码?</span>
                                        </Tooltip>
                                        <Link className={styles.register} to={"/register"}>学员注册</Link>
                                    </FormItem>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        );
    }
}

Login.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object
};

export default Login;
